<template>
  <div
    v-if="configData.layer"
    class="topo-render"
    :style="layerStyle"
  >
    <template v-for="(component,index) in configData.components">
      <div
        v-show="component.style.visible == undefined? true:component.style.visible"
        :key="index"
        class="topo-render-wrapper"
        :class="{'topo-render-wrapper-clickable': component.action.length > 0 }"
        :style="{
          left: component.style.position.x + 'px',
          top: component.style.position.y + 'px',
          width: component.style.position.w + 'px',
          height: component.style.position.h + 'px',
          backgroundColor: component.style.backColor,
          zIndex: component.style.zIndex,
          borderWidth: component.style.borderWidth + 'px',
          borderStyle: component.style.borderStyle,
          borderColor: component.style.borderColor,
          transform: component.style.transform? `rotate(${component.style.transform}deg)`:'rotate(0deg)',
        }"
        @click="doClickComponent(component)"
        @dblclick="doDbClickComponent(component)"
      >
        <component :is="parseView(component)" ref="spirit" :detail="component" />
      </div>
    </template>
  </div>
</template>

<script>
import TopoBase from './TopoBase'

import topoUtil from './util/topo-util'

export default {
  name: 'TopoRender',
  components: {

  },
  extends: TopoBase,
  props: {
    configData: {
      type: Object,
      default() {
        return {

        }
      }
    }
  },
  computed: {
    layerStyle: function() {
      const styles = []
      if (this.configData.layer.backColor) {
        styles.push(`background-color: ${this.configData.layer.backColor}`)
      }
      if (this.configData.layer.width > 0) {
        styles.push(`width: ${this.configData.layer.width}px`)
      }
      if (this.configData.layer.height > 0) {
        styles.push(`height: ${this.configData.layer.height}px`)
      }
      const style = styles.join(';')
      return style
    }
  },
  methods: {
    parseView(component) {
      return topoUtil.parseViewName(component)
    },
    doClickComponent(component) {
      for (let i = 0; i < component.action.length; i++) {
        const action = component.action[i]
        if (action.type === 'click') {
          this.handleComponentActuib(action)
        }
      }
    },
    doDbClickComponent(component) {
      for (let i = 0; i < component.action.length; i++) {
        const action = component.action[i]
        if (action.type === 'dblclick') {
          this.handleComponentActuib(action)
        }
      }
    },
    handleComponentActuib(action) {
      const that = this
      if (action.action === 'visible') {
        if (action.showItems.length > 0) {
          action.showItems.forEach(identifier => {
            that.showComponent(identifier, true)
          })
        }
        if (action.hideItems.length > 0) {
          action.hideItems.forEach(identifier => {
            that.showComponent(identifier, false)
          })
        }
      } else if (action.action === 'util') {
        that.sendFun(action)
      }
    },
    showComponent(identifier, visible) {
      console.log('show:' + identifier + ',visible:' + visible)
      const spirits = this.$refs['spirit']
      for (let i = 0; i < spirits.length; i++) {
        const spirit = spirits[i]
        if (spirit.detail.identifier === identifier) {
          spirit.detail.style.visible = visible
          break
        }
      }
    }
  }
}
</script>

<style lang="scss">
    .topo-render {
        overflow: auto;
        background-color: white;
        background-clip: padding-box;
        background-origin: padding-box;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        position: relative;
        height: 100%;

        .topo-render-wrapper {
            position: absolute;
        }

        .topo-render-wrapper-clickable {
            cursor: pointer;
        }
    }
</style>

